import React from "react";
import { Carousel, Flex, Grid, WingBlank } from 'antd-mobile';
import axios from 'axios';
import './index.scss'
import logo from '../../assets/images/logo192.png';
import { getPositionCity } from "../../utils"
const navList = [
	{
		name: "整租",
		img: logo,
		path: "/home/list"
	},
	{
		name: "合租",
		img: logo,
		path: "/home/list"
	},
	{
		name: "地图找房",
		img: logo,
		path: "/map"
	},
	{
		name: "去出租",
		img: logo,
		path: "/map"
	}
]


export default class Index extends React.Component {
	state = {
		swipers: [],
		groups: [],
		news: [],
		curCityName: ""
	}
	async componentDidMount() {

		this.getSwipers()
		this.getGroups()
		this.getNews()
		const curCity = await getPositionCity()
		this.setState(() => {
			return {
				curCityName: curCity.label
			}
		})
	}
	getSwipers = () => {
		let _this = this
		axios.get("http://localhost:8007/home/swiper").then(function (res) {
			let data = res.data;
			if (data.status == 200) {
				_this.setState(() => {
					return {
						swipers: data.body
					}
				}, function () {
				})
			}
		}).finally(function (res) {
		})
	}
	async getGroups(params) {
		const res = await axios.get("http://localhost:8007/home/groups", {
			params: {
				area: "AREA|88cff55c-aaa4-e2e0"
			}
		})
		this.setState({
			groups: res.data.body
		})
	}
	async getNews() {
		const res = await axios.get("http://localhost:8007/home/news", {
			params: {
				area: "AREA|88cff55c-aaa4-e2e0"
			}
		})
		this.setState({
			news: res.data.body
		})
	}
	renderSwiper = () => {

		return this.state.swipers.map(item => (
			<a
				key={item.id}
				href="http://www.alipay.com"
				style={{ display: 'inline-block', width: '100%', height: 212 }}
			>
				<img
					src={`http://localhost:8007${item.imgSrc}`}
					alt=""
					style={{ width: '100%', verticalAlign: 'top' }}
				/>
			</a>
		))
	}
	renderNav = () => {
		return (
			navList.map((item) => {
				return <Flex.Item key={item.name} justify="center" direction="cloumn" align="center" onClick={() => {
					this.props.history.push(item.path)
				}} >
					<img src={item.img} alt="" />
					<p>{item.name}</p>
				</Flex.Item>
			})
		)
	}
	renderNews = () => {
		return (
			this.state.news.map(item => {
				return <Flex justify="between" className="newsOne" key={item.id}>
					<img src={`http://localhost:8007${item.imgSrc}`} alt="" />
					<div className="newsTxt">
						<h3 className="txtTop">{item.title}</h3>
						<div className="txtBottom">
							<span className="bottomLeft">{item.from}</span>
							<span className="bottomRight">{item.date}</span>
						</div>
					</div>

				</Flex>
			})
		)
	}
	render() {
		return (
			<div className="index">

				<div className="swiper">
					{this.state.swipers.length > 0 &&
						<Carousel
							autoplay={true}
							infinite
							autoplayInterval={3000}
						>
							{this.renderSwiper()}
						</Carousel>
					}
					<Flex className="search-box">
						<Flex className="search">
							<div className="location" onClick={() => this.props.history.push("/citylist")}>
								<span className="name">{this.state.curCityName}</span>
								<i className="iconfont icon-arrow"></i>
							</div>
							<div className="from" onClick={() => this.props.history.push("/search")}>
								<i className="iconfont icon-seach"></i>
								<span>请输入小区或地址</span>
							</div>
						</Flex>
						<i className="iconfont icon-map" onClick={() => this.props.history.push("/map")}></i>
					</Flex>
				</div>
				<Flex justify="around" className="nav">
					{this.renderNav()}
				</Flex>
				<div className="groups">
					<div className="groups_title">
						<h3>租房小组</h3> <span>更多</span>
					</div>

					<Grid data={this.state.groups} columnNum={2} square={false} hasLine={false}
						renderItem={dataItem => (
							<div style={{ padding: '12.5px' }} className="groupsOne">
								<div className="leftDiv">
									<p style={{ marginBottom: "10px" }}>{dataItem.title}</p>
									<p>{dataItem.desc}</p>
								</div>
								<div className="rightImg">
									<img src={`http://localhost:8007${dataItem.imgSrc}`} alt="" />
								</div>
							</div>
						)}
					/>
				</div>
				<div className="news" style={{ marginBottom: "50px" }}>
					<WingBlank size="lg">
						<div className="news_title">
							<h3>最新资讯</h3>
						</div>
						<div className="newContent">
							{this.renderNews()}
						</div>
					</WingBlank>
				</div>


			</div>
		);
	}
}